<template>
  <div>
    <el-form>
      <el-form-item label="企业名称:">
        <el-input
          v-model="name"
          type="text"
          placeholder="请输入企业名称"

          style="width:220px"
          @input="onSearch"
        />
        <el-button type="primary" style="margin:0 20px" @click="onSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="$router.push('/enterprise/detail')">添加企业</el-button>
      </el-form-item>

      <el-table
        v-loading="loading"
        :data="data"
        style="width: 100%"
        row-key="id"
        @expand-change="expandChange"
      >
        <el-table-column
          type="expand"
          lazy="true"
        >
          <el-table-column type="expand">
            <template #default="{row}">
              <el-table
                v-loading="childLoading"
                :data="tableData[row.id]"
                style="width: 100%"
              >
                <el-table-column
                  label="租赁楼宇"
                  prop="buildingName"
                />
                <el-table-column
                  label="租赁起止时间"
                  prop="startTime"
                >
                  <template #default="{row}">
                    {{ row.startTime +'-'+ row.endTime }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="合同状态"
                  prop="state"
                >
                  <template #default="{row}">
                    <el-tag v-if="row.status === 0">待生效</el-tag>
                    <el-tag v-else-if="row.status === 1" type="success">生效中</el-tag>
                    <el-tag v-else-if="row.status === 2" type="info">已到期</el-tag>
                    <el-tag v-else-if="row.status === 3" type="warning">已退租</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  prop="demoFlag"
                >
                  <template #default="{row}">
                    <el-button type="text" size="small" :disabled="row.status===0">续租</el-button>
                    <el-button type="text" size="small">退租</el-button>
                    <el-button type="text" size="small" :disabled="row.status!==2||3">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>

          <el-table-column
            label="序号"
            type="index"
          />
          <el-table-column
            label="企业名称"
            prop="name"
          />
          <el-table-column
            label="联系人"
            prop="contact"
          />
          <el-table-column
            label="联系电话"
            prop="contactNumber"
          />

          <el-table-column
            prop="demoFlag"
            label="操作"
          >
            <template #default="{row}">
              <el-button type="text" size="small" @click="visible=true">添加合同</el-button>
              <el-button type="text" size="small" @click="onSub('look',(row.id))">查看</el-button>
              <el-button type="text" size="small" @click="onSub('edit',(row.id))">编辑</el-button>
              <el-popconfirm
                title="是否确认退租当前企业？"
                @onConfirm="onDel(row.id)"
              >
                <el-button slot="reference" type="text">删除</el-button>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table-column></el-table>

    </el-form>
    <el-row type="flex" justify="end">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20,50,100]"
        layout="total,prev,pager,next,sizes"
        :total="total"
        :page-size="page"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </el-row>
    <add-enter ref="entRef" :visible.sync="visible" @onSuccess="onLoad" />
  </div>
</template>

<script>

import { delEnterAPI, getContactAPI, getEnterAPI, getRentAPI } from '@/api/enterprise'
import addEnter from './components/add-enter.vue'
export default {
  components: { addEnter },
  data() {
    return {
      data: [],
      tableData: [],
      loading: false,
      contactList: [],
      page: 1,
      pageSize: 10,
      total: 0,
      visible: false,
      name: ''

    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    onSearch() {
      this.page = 1
      this.onLoad()
    },
    async onDel(id) {
      await delEnterAPI(id)
      this.$message.success('删除成功')
      if (this.contactList.list === 1) {
        this.page--
      }
      this.onLoad()
    },
    onSub(type, id) {
      if (type === 'edit') {
        this.visible = true
        this.$refs.editRef.formData.enterpriseId = id
      }
    },

    async onGetContact() {
      const { data } = await getContactAPI()
      console.log(data)
      this.contactList = data.rows
    },
    async onLoad() {
      this.loading = true
      const res = await getEnterAPI({ page: this.page,
        pageSize: this.pageSize })
      this.loading = false
      this.data = res.data.rows
      this.total = res.data.total
    },
    async expandChange(row, expandedRows) {
      if (expandedRows.length > 0) {
        this.childLoading = true
        const res = await getRentAPI(row.id)
        console.log(res, 888)
        this.tableData[row.id] = res.data
        // console.log(Object.keys(this.tableData))

        this.childLoading = false
      }
    },
    onCurrentChange(page) {
      this.page = page
      this.onLoad()
    },
    onSizeChange(val) {
      this.pageSize = val
      this.onLoad()
      this.page = 1
    }
  }
}
</script>

<style>

</style>
